<template>
  <div class="cabinetInfo">
    <div class="cabinet-info-main">
      <div class="cabinet-detail-main">
        <div class="detail-item">
          <div class="detail-label">
            {{ $i18n.t("cabinet.cabinetName") }}：
          </div>
          <div class="detail-text">
            {{ cabinetInfo.cabinetName||'-' }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-label">
            {{ $i18n.t("cabinet.cabinetCode") }}：
          </div>
          <div class="detail-text">
            {{ cabinetInfo.cabinetCode||'-' }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-label">
            {{ $i18n.t("cabinet.cabinetType") }}：
          </div>
          <div class="detail-text">
            {{ cabinetInfo.cabinetType==1?'文件柜':cabinetInfo.cabinetType==2?'钥匙柜':'-' }}
          </div>
        </div>
        <div class="detail-item">
          <div class="detail-label"></div>
          <div class="detail-text"></div>
        </div>
      </div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        :otherParams="otherParams"
        uniqueId="mesProcessTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
    </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig, formDescDialogMinxin } from './config'
import { getList, rowUpdate, rowDetail } from '@/api/cabinet/cabinetInfo/index.js'
import { rowDetail as cabinetDetail } from '@/api/cabinet/cabinet/index.js'

// import url from '@/axios/url'
// import { exportExcel } from '@/utils/judge'
// const { minioUrl } = url()
export default {
  name: 'cabinetInfo',
  mixins: [formDescDialogMinxin, searchConfig, operateList],
  data() {
    return {
      processCodeList: [],
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      cabinetInfo: {
        cabinetName: null,
        cabinetCode: null,
        cabinetType: null
      },
      formDataDialog: {},
      // operateList,
      otherParams: {
        cabinetId: null
      },
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'boxCode',
          label: $i18n.t('cabinet.cellCode'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'boxName',
          label: $i18n.t('cabinet.cellLocation'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'statusStr',
          label: $i18n.t('common.status'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 60,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  beforeMount() {
    this.otherParams.cabinetId = this.$route.query.id
  },
  mounted() {
    this.getCabinetDetail()
  },
  methods: {
    getCabinetDetail() {
      cabinetDetail(this.otherParams.cabinetId).then(res => {
        if (res.data.success) {
          this.cabinetInfo.cabinetName = res.data.result.cabinetName
          this.cabinetInfo.cabinetCode = res.data.result.cabinetCode
          this.cabinetInfo.cabinetType = res.data.result.cabinetType
        }
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.iddss === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        back: () => {
          this.$router.push({
            path: '/cabinet/cabinet'
          })
        }
        // add: () => {
        //   this.disableFields(false)
        //   this.formDataDialog = {}
        //   this.visible = true
        // }
      }
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then(res => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      // const params = this.formDataDialog.id
      //   ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data }
      //   : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      const params = { title: $i18n.t('common.editSuccess'), api: rowUpdate, data }
      this.doSubmit(params)
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then(res => {
        this.formDataDialog = res.data.result
      })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
<style scoped lang="scss">
.cabinet-info-main {
  position: relative;
}
.cabinet-detail-main {
  display: flex;
  position: absolute;
  top: 48px;
  left: 120px;
  line-height: 32px;
  font-size: 12px;
  .detail-item {
    display: flex;
    margin-right: 20px;
  }
}
.mesProcess {
  /deep/.el-transfer-panel {
    width: 40% !important;
  }
  .warning-row {
    background: oldlace;
  }
}
</style>
